<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 组件-发票抬头 开发者: 麦沃德科技-半夏 
+---------------------------------------------------------------------- -->

<template>
	<uni-swipe-action class="component-invoice-title" :style="{'--theme-color': themeColor}">
		<view class="invoice-title-item" v-for="item in showData" :key="item.id">
			<view class="item-head">
				<text v-if="item.invoice_type == 1">普通发票 抬头-{{item.title_type == 1 ? "个人" : "单位"}}</text>
				<text v-else-if="item.invoice_type == 2">专用发票</text>
			</view>
			<uni-swipe-action-item :key="item.id">
				<view class="item-info flex align-items-center">
					<view class="info-left flex-item">
						<view class="left-title text-ellipsis">{{item.invoice_title}}</view>
						<view class="left-subtitle text-ellipsis" v-if="item.mobile">{{item.mobile}}</view>
					</view>
					<view class="info-right" @click="handleEdit(item.id)">
						<view class="right-bg"></view>
						<view class="right-icon" :style="{'background-image': 'url('+ iconEdit +')'}" v-if="iconEdit"></view>
					</view>
				</view>
				<template v-slot:right>
					<view class="item-btn flex flex-center" @click="handleDelete(item.id)">删除</view>
				</template>
			</uni-swipe-action-item>
			<view class="item-mask" v-if="loading">
				<view class="mask-top">
					<view class="top-box"></view>
				</view>
				<view class="mask-bottom flex align-items-center">
					<view class="bottom-left">
						<view class="left-box"></view>
						<view class="left-box" v-if="item.mobile"></view>
					</view>
					<view class="bottom-right">
						<view class="right-box"></view>
					</view>
				</view>
			</view>
		</view>
	</uni-swipe-action>
</template>

<script>
	import svgData from "@/common/svg.js"
	import { mapState } from "vuex"
	export default {
		name: "componentInvoiceTitle",
		props: ["showData", "loading"],
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
				iconEdit: state => {
					return svgData.svgToUrl("edit", state.app.themeColor)
				},
			})
		},
		methods: {
			// 编辑抬头
			handleEdit(id) {
				this.$util.toPage({
					mode: 1,
					path: '/pages/passenger/mine/invoice/addTitle?id=' + id,
					isToken: true,
				})
			},
			// 删除抬头
			handleDelete(id) {
				uni.showModal({
					content: " 确认删除抬头信息？ \n 点击【确认删除】按钮删除抬头 ",
					confirmColor: "#DE2826",
					confirmText: "确认删除",
					cancelColor: "#242629",
					cancelText: "我再想想",
					success: (res) => {
						if (res.confirm) {
							this.$util.request("passenger.invoice.title.delete", {
								id,
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										icon: "success",
										title: "删除成功",
										duration: 1500
									})
									this.$emit("getList")
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(error => {
								console.error('删除抬头 ', error)
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.component-invoice-title {
		.invoice-title-item {
			position: relative;
			margin-top: 32rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;

			&:first-child {
				margin-top: 0;
			}

			.item-head {
				color: #242629;
				font-size: 28rpx;
				line-height: 40rpx;
				padding: 24rpx 32rpx;
				border-bottom: 1px solid #F6F7FB;
			}

			.item-info {
				padding: 32rpx 48rpx 32rpx 32rpx;

				.info-left {
					.left-title {
						color: #242629;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
					}

					.left-subtitle {
						margin-top: 16rpx;
						color: #ACADB7;
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}

				.info-right {
					padding: 16rpx;
					border-radius: 8rpx;
					overflow: hidden;
					position: relative;
					z-index: 1;
					margin-left: 24rpx;

					.right-bg {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: -1;
						background: var(--theme-color);
						opacity: .05;
					}

					.right-icon {
						width: 24rpx;
						height: 24rpx;
						background-size: 24rpx;
					}
				}
			}

			.item-btn {
				color: #ffffff;
				font-size: 28rpx;
				line-height: 40rpx;
				background: #FF2E2E;
				padding: 0 36rpx;
			}

			.item-mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 9;
				background: #FFF;

				.mask-top {
					padding: 24rpx 32rpx;
					border-bottom: 1px solid #F6F7FB;

					.top-box {
						width: 100%;
						height: 40rpx;
						background: #eee;
					}
				}

				.mask-bottom {
					padding: 32rpx 48rpx 32rpx 32rpx;

					.bottom-left {
						flex: 1;

						.left-box {
							width: 100%;
							height: 40rpx;
							background: #eee;
							margin-top: 16rpx;

							&:first-child {
								margin-top: 0;
							}
						}
					}

					.bottom-right {
						margin-left: 32rpx;

						.right-box {
							width: 56rpx;
							height: 56rpx;
							background: #eee;
						}
					}
				}
			}
		}
	}
</style>